<script lang='ts' setup>
import Header from '@/components/manager/Header';

const { path, matched } = $(useRoute())
const selectedKeys = $ref([path])
console.log(matched);

const { clearLoginState,personalInfo } = $(useAuth());
</script>

<template>
  <a-layout h-full>
    <!-- 顶部导航 -->
    <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
      <div flex="~ v-center" gap="5">
        <span text="5 #e5e7eb">Logo管理后台</span>
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="horizontal">
          <!-- 其他导航 -->
          <component :is="Header" />
        </a-menu>
      </div>

      <!-- 头像 -->
      <div class="header" text-5>
            <a-dropdown >
                <a  style="color:#ffffff;align-items: center;vertical-align: center;" class="ant-dropdown-link" @click.prevent >
                    {{JSON.parse(personalInfo).username}}
                    <DownOutlined :style="{ fontSize: '12px',verticalAlign: 'center'}" />
                </a>
                <template #overlay>
                    <a-menu>
                        <a-menu-item key="2" @click="clearLoginState">退出系统</a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
    </a-layout-header>

    <a-layout-content m="t-16!" p="x-12!">
      <!-- 面包屑 -->
      <a-breadcrumb m="y-16px!">
        <a-breadcrumb-item v-for="item in matched" :key="item.name">
          <RouterLink :to="item.path !== '/manager' && item.path !== '/manager/product' ? item.path : '#'">{{ item.name }}
          </RouterLink>
        </a-breadcrumb-item>
      </a-breadcrumb>
      <!-- 模块内容 -->
      <div :bg="path !== '/manager/main' ? 'white': '' " p="6">
        <RouterView />
      </div>
    </a-layout-content>
  </a-layout>
</template>
<style lang="less" scoped>
.header {
  color:#ffffff;
    position: absolute;
    height: 63px;
    width: 98px;
    top: 0;
    right: 0;
}
</style>